<template>
	<!-- 优惠劵弹窗 -->
	<u-popup :show="showPop" mode="bottom" round="12" @close="close">
		<view class="myCoupon">
			<scroll-view scroll-y="true" class="scrollCon">
				<u-radio-group v-model="radiovalue" placement="column">
					<view class="coupItem" v-for="(item,index) in dataList" :key="index">
						<image src="/static/images/coupon/wsy.png" mode="" class="bckImage"></image>
						<view class="itLeft">
							<view class="couType">
								<text>满减券</text>
							</view>
							<view class="price">
								<text class="pText">60</text>
								<text class="pText2">元</text>
							</view>
							<text class="candition">满300可用</text>
						</view>
						<view class="itRight">
							<text>团购满减券-新人福利</text>
							<text class="greyP2">全平台可用</text>
							<text class="greyP">有效期：30天</text>
						</view>
						<view class="radioCon">
							<u-radio :name="item.id" activeColor='#44D4A8'>
							</u-radio>
						</view>
					</view>
				</u-radio-group>
			</scroll-view>
			<view class="btnCon">
				<view class="one" @tap="showPop=false">
					<text>取消</text>
				</view>
				<view class="one two">
					<text>确认</text>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "couponPop",
		props: {

		},
		data() {
			return {
				showPop: false,
				dataList: [{
						id: 1,
					},
					{
						id: 2,
					},
					{
						id: 3,
					},
					{
						id: 4,
					}
				],
				radiovalue: 1,
			};
		},
		methods: {
			open() {
				this.showPop = true
			},
			close() {
				this.showPop = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.greyP {
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
	}

	.greyP2 {
		color: rgba(102, 102, 102, 1);
		margin: 40rpx 0;
		font-size: 24rpx;
	}

	.myCoupon {
		position: relative;

		.scrollCon {
			height: 544rpx;
			padding-top: 16rpx;

			.coupItem {
				position: relative;
				height: 228rpx;
				margin: 24rpx;
				display: flex;
				align-items: center;
				padding: 32rpx 24rpx 12rpx 50rpx;

				image {
					z-index: 1;
				}

				.itLeft {
					position: relative;
					z-index: 2;
					font-size: 24rpx;
					font-weight: 400;
					display: flex;
					flex-direction: column;
					align-items: center;

					.couType {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 104rpx;
						height: 36rpx;
						border-radius: 4rpx;
						background: rgba(76, 212, 230, 1);
						box-shadow: 2rpx 2rpx 4rpx;
						color: #fff;
					}

					.price {
						display: flex;
						align-items: flex-end;
						line-height: 42.43px;
						margin-top: 14rpx;

						.pText {
							font-size: 64rpx;
							font-weight: 600;
							color: rgba(54, 68, 79, 1);
						}

						.pText2 {
							position: relative;
							font-size: 28rpx;
							font-weight: 600;
							color: rgba(54, 68, 79, 1);
							top: 8rpx;
						}
					}

					.candition {
						color: rgba(94, 103, 110, 1);
						font-size: 24rpx;
					}
				}

				.itRight {
					position: relative;
					z-index: 2;
					display: flex;
					flex-direction: column;
					margin-left: 82rpx;
				}

				.radioCon {
					position: absolute;
					z-index: 2;
					right: 54rpx;
				}
			}
		}

		.btnCon {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx;

			.one {
				flex: 1;
				height: 88rpx;
				font-size: 28rpx;
				border-radius: 24rpx;
				background: rgba(246, 248, 252, 1);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: rgba(54, 68, 79, 1);
			}

			.two {
				background-color: $theme-color;
				color: #fff;
				margin-left: 48rpx;
			}
		}
	}
</style>